<template>
  <el-dialog
    :title="title"
    :visible.sync="isshow"
    width="600px"
  >
    <div class="dialogContent">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="群组名称" label-width="130px" prop="groupIds" required>
          <el-select
            v-if="type==2"
            v-model="form.groupIds"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            filterable
            placeholder="请选择"
          >

            <el-option
              v-for="item in options"
              :key="item.storageId"
              :label="item.groupName"
              :value="item.storageId"
            >
            </el-option>
          </el-select>
          <div v-else>{{ updateGroupName }}</div>
        </el-form-item>
        <el-form-item label="本次可分配容量" label-width="130px" prop="distributable">
          <div>{{ distributableStore }}GB</div>
        </el-form-item>
        <el-form-item label="本次分配容量" label-width="130px" prop="totalStorageSize" required>
          <el-input-number v-model="form.totalStorageSize" :min="0"></el-input-number>
          GB
        </el-form-item>
        <el-form-item label="本次剩余容量" label-width="130px" prop="residue">
          <div :class="residueStore<0?'errorText':''"> {{ residueStore }}GB</div>
          <div v-if="residueStore<0" class="errorTip">剩余容量不足，请重新分配</div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="isshow=false">取 消</el-button>
    <el-button type="primary" @click="confirmAdd('form')">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
import { batchEditStorageConfig, groupConfigInfo } from '@/api/library_groupList/groupList'
import { getLibrsryGroupList } from '@/api/library/librarySet'

export default {
  name: 'groupStoreSet',
  data() {
    return {
      isshow: false,
      title: '',
      form: {
        totalStorageSize: 400,
        groupIds: []
      },
      props: {
        multiple: true,
        emitPath: false,
        label: 'label',
        value: 'value',
        children: 'children'
      },
      options: [],
      distributableStore: '',
      type: '',
      updateGroupName: '',
      rules: {
        groupIds: [
          { required: true, message: '选择群组不能为空', trigger: 'change' }
        ],
        totalStorageSize: [
          { required: true, message: '分配容量不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    residueStore() {
      return this.form.groupIds.length == 0 ? this.distributableStore : this.distributableStore - ((this.form.totalStorageSize || 0) * this.form.groupIds.length)
    }
  },
  methods: {
    show(arr, type) {
      this.title = '存储配置'
      this.type = type
      this.updateGroupName = arr[0].groupName
      this.form.groupIds = arr.map(e => e.storageId)
      this.getGroupInfo(this.form.groupIds)
      this.getList()
      this.isshow = true
    },
    confirmAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.residueStore < 0) {
            this.$message({
              type: 'error',
              message: '容量不足分配，请重新分配！'
            })
            return
          }
          this.setGroupInfo()
        } else {
          // console.log('error submit!!');
          return false
        }
      })

    },
    async getGroupInfo(arr) {
      let res = await groupConfigInfo({ storageIds: arr.join(',') })
      if (res.code == 200) {
        this.distributableStore = res.data.remainSize
        this.form.totalStorageSize = res.data.maxAssignedSize
      }
    },
    async getList() {
      let res = await getLibrsryGroupList({ pageNum: 1, pageSize: 999999 })
      if (res.code == 200) {
        this.options = res.rows
      }
    },
    // 修改群组
    async setGroupInfo() {
      let res = await batchEditStorageConfig({ storageIds: this.form.groupIds, totalStorageSize: this.form.totalStorageSize })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '修改成功！'
        })
        this.isshow = false
        this.$parent.getList()
      }
    }

  }
}

</script>


<style scoped lang="scss">
::v-deep .dialogContent .el-select {
  width: 300px;
  margin-left: 0 !important;
}

.errorTip {
  color: red;
  font-size: 12px;
}

.errorText {
  color: red;
}
</style>
